<template>
    <a-row justify="center" align="center" style="height:99%">
        <a-col :span="8">
            <a-form class="login-form" :model="loginFormData" @submit="loginSubmit">
                <h1 style="text-align: center;margin: 0 0 30px 0;font-size: 32px;">用户登录</h1>

                <a-form-item field="username" label="用户名:"
                    :rules="[{required:true,message:'用户名不能为空'},{minLength:3,maxLength:12,message:'长度在3-12字符'}]"
                    :validate-trigger="['change','input']">
                    <a-input v-model="loginFormData.username" placeholder="请输入用户名" />
                </a-form-item>

                <a-form-item field="password" label="密  码:"
                    :rules="[{required:true,message:'密码不能为空'},{minLength:6,maxLength:20,message:'长度在6-20字符'}]"
                    :validate-trigger="['change','input']">
                    <a-input-password allow-clear v-model="loginFormData.password" placeholder="请输入密码" />
                </a-form-item>

                <a-form-item>
                    <a-button html-type="submit">登录</a-button>
                </a-form-item>
            </a-form>
        </a-col>
    </a-row>
</template>


<script>
import { reactive, } from "vue";
import { useRouter } from 'vue-router';
import { Message } from "@arco-design/web-vue";
import { login } from "../api/user";

export default {
    setup() {
        const router = useRouter();

        const loginFormData = reactive({
            username: '',
            password: '',
        })
        const loginSubmit = ({ values }) => {
            login(values).then(res => {
                if (res.code != 200) {
                    Message.error(`登录失败: ${res.msg}`);
                    return;
                }
                Message.success("登录成功");
                window.sessionStorage.setItem('token', res.data.token);
                window.sessionStorage.setItem('username', res.data.username);
                router.push("admin/");
            });
        }

        return {
            loginFormData,
            loginSubmit
        }
    },
}
</script>


<style scoped>
.login-form {
    width: 380px;
    height: 280px;
    justify-content: center;
    background-color: white;
    border-radius: 5px;
    padding: 8px 10px;
    box-shadow: 0 0 4px 2px #ccc;
}
</style>